import React, { useState, useEffect } from'react';
import moment from'moment';
import { useNavigate } from 'react-router-dom';
const ProductDetail = () => {
    const navigate = useNavigate();
    const [countdown, setCountdown] = useState({
        days: 0,
        hours: 0,
        minutes: 0,
        seconds: 0
    });
    const endTime = moment().add(13, 'hours').add(50, 'minutes').add(59, 'seconds');

    useEffect(() => {
        const interval = setInterval(() => {
            const now = moment();
            const diff = endTime.diff(now);
            const duration = moment.duration(diff);
            setCountdown({
                days: duration.days(),
                hours: duration.hours(),
                minutes: duration.minutes(),
                seconds: duration.seconds()
            });
            if (diff <= 0) {
                clearInterval(interval);
            }
        }, 1000);
        return () => clearInterval(interval);
    }, []);


    const [showBuyModal, setShowBuyModal] = useState(false);

    const [showCartSuccessModal, setShowCartSuccessModal] = useState(false);

    const [cartQuantity, setCartQuantity] = useState(1);
    const [selectedColor, setSelectedColor] = useState('淡金色');
 
    const [selectedSize, setSelectedSize] = useState('10cm');

    const [cartItems, setCartItems] = useState([]);

    const handleBuyClick = () => {
        setShowBuyModal(true);
    };

    const handleCartClick = () => {
        const newItem = {
            name: '创意卫浴五件套',
            price: 250,
            quantity: cartQuantity,
            color: selectedColor,
            size: selectedSize
        };
        setCartItems([...cartItems, newItem]);
        setShowCartSuccessModal(true);
    };

    const handleCloseBuyModal = () => {
        setShowBuyModal(false);
    };

    const handleColorChange = (color) => {
        setSelectedColor(color);
    };

    const handleSizeChange = (size) => {
        setSelectedSize(size);
    };

    const handleQuantityChange = (type) => {
        if (type === 'increase' && cartQuantity < 100) {
            setCartQuantity(cartQuantity + 1);
        } else if (type === 'decrease' && cartQuantity > 1) {
            setCartQuantity(cartQuantity - 1);
        }
    };

    const handleCloseCartSuccessModal = () => {
        setShowCartSuccessModal(false);
    };

    return (
        <div style={{ padding: '10px' }}>
            <img src="http://t14.baidu.com/it/u=1293879872,303967190&fm=224&app=112&f=JPEG?w=500&h=5001" alt="创意卫浴五件套" style={{ width: '100%', marginBottom: '10px' }} />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div>
                    <p>创意卫浴五件套 欧式高档卫生间洗漱杯套装浴室用品刷牙杯漱口杯</p>
                    <p style={{ color:'red', fontWeight: 'bold', fontSize: '20px' }}>250币 <del style={{ color: 'gray', fontSize: '16px' }}>300币-</del></p>
                    <p style={{ color: 'gray' }}>距离抢购结束 {countdown.days} : {countdown.hours.toString().padStart(2, '0')} : {countdown.minutes.toString().padStart(2, '0')} : {countdown.seconds.toString().padStart(2, '0')}</p>
                </div>
                <div>
                </div>
            </div>
            <div style={{ marginTop: '20px', borderTop: '1px solid #ddd', paddingTop: '10px' }}>
                <h3>服务详情</h3>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                    <p>服务</p>
                    <p>24小时内送货 · 15天退货</p>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                    <p>说明</p>
                    <p>假一赔十 | 7天无理由退货</p>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <p>选择</p>
                    <p style={{ color: 'pink' }}>淡金色 【10cm】</p>
                </div>
            </div>
            <div style={{ marginTop: '20px', borderTop: '1px solid #ddd', paddingTop: '10px' }}>
                <h3>商品参数</h3>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
                    <p>件数</p>
                    <p>5件</p>
                </div>
            </div>
            <div style={{ position: 'fixed', bottom: 0, width: '100%', backgroundColor: 'white', display: 'flex', justifyContent: 'space-around', alignItems: 'center', padding: '10px', borderTop: '1px solid #ddd' }}>
                <div onClick={handleCartClick}>
                    <img src="https://img2.baidu.com/it/u=1521547239,2675450074&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="购物车图标" style={{ width: '30px', height: '30px' }}onClick={handleBuyClick} />
                </div>
                <div>
                    <img src="https://img0.baidu.com/it/u=2825700858,270973486&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="收藏图标" style={{ width: '30px', height: '30px' }} />
                </div>
                <div style={{ backgroundColor: '#1E90FF', color: 'white', padding: '10px', borderRadius: '5px' }}onClick={handleBuyClick}>立即购买</div>
            </div>

            {showBuyModal && (
                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', width: '80%', maxWidth: '400px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                            <img src="http://t14.baidu.com/it/u=1293879872,303967190&fm=224&app=112&f=JPEG?w=500&h=5001" alt="商品图片" style={{ width: '80px', height: '80px', marginRight: '10px' }} />
                            <div>
                                <p style={{ color:'red', fontWeight: 'bold', fontSize: '20px' }}>250币</p>
                                <p>已选: {selectedColor} {selectedSize}</p>
                            </div>
                            <button style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }} onClick={handleCloseBuyModal}>
                                <img src="https://img0.baidu.com/it/u=1097495796,1036518331&fm=253&fmt=auto&app=138&f=JPEG?w=470&h=471" alt="close图标" style={{ width: '20px', height: '20px' }} />
                            </button>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>选择颜色</p>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <button
                                    style={{
                                        backgroundColor: selectedColor === '淡金色'? '#1E90FF' : '#f0f0f0',
                                        color: selectedColor === '淡金色'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleColorChange('淡金色')}
                                >
                                    淡金色
                                </button>
                                <button
                                    style={{
                                        backgroundColor: selectedColor === '银色'? '#1E90FF' : '#f0f0f0',
                                        color: selectedColor === '银色'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleColorChange('银色')}
                                >
                                    银色
                                </button>
            
                            </div>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>选择尺寸</p>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <button
                                    style={{
                                        backgroundColor: selectedSize === '10cm'? '#1E90FF' : '#f0f0f0',
                                        color: selectedSize === '10cm'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleSizeChange('10cm')}
                                >
                                    10cm
                                </button>
                                <button
                                    style={{
                                        backgroundColor: selectedSize === '12cm'? '#1E90FF' : '#f0f0f0',
                                        color: selectedSize === '12cm'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleSizeChange('12cm')}
                                >
                                    12cm
                                </button>
                
                            </div>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>购买数量</p>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <button style={{ backgroundColor: '#f0f0f0', border: 'none', padding: '5px 10px', borderRadius: '5px', cursor: 'pointer' }} onClick={() => handleQuantityChange('decrease')}>-</button>
                                <input type="text" value={cartQuantity} style={{ width: '50px', textAlign: 'center', border: '1px solid #ccc', borderRadius: '5px', margin: '0 10px' }} readOnly />
                                <button style={{ backgroundColor: '#f0f0f0', border: 'none', padding: '5px 10px', borderRadius: '5px', cursor: 'pointer' }} onClick={() => handleQuantityChange('increase')}>+</button>
                            </div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <button style={{ backgroundColor: '#1E90FF', color: 'white', border: 'none', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer' }} onClick={()=>navigate('/ding')}>确认购买</button>
                        </div>
                    </div>
                </div>
            )}


            {showBuyModal && (
                <div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(0, 0, 0, 0.5)', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{ backgroundColor: 'white', borderRadius: '10px', padding: '20px', width: '80%', maxWidth: '400px' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
                            <img src="http://t14.baidu.com/it/u=1293879872,303967190&fm=224&app=112&f=JPEG?w=500&h=5001" alt="商品图片" style={{ width: '80px', height: '80px', marginRight: '10px' }} />
                            <div>
                                <p style={{ color:'red', fontWeight: 'bold', fontSize: '20px' }}>250币</p>
                                <p>已选: {selectedColor} {selectedSize}</p>
                            </div>
                            <button style={{ backgroundColor: 'transparent', border: 'none', cursor: 'pointer' }} onClick={handleCloseBuyModal}>
                                <img src="https://img0.baidu.com/it/u=1097495796,1036518331&fm=253&fmt=auto&app=138&f=JPEG?w=470&h=471" alt="close图标" style={{ width: '20px', height: '20px' }} />
                            </button>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>选择颜色</p>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <button
                                    style={{
                                        backgroundColor: selectedColor === '淡金色'? '#1E90FF' : '#f0f0f0',
                                        color: selectedColor === '淡金色'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleColorChange('淡金色')}
                                >
                                    淡金色
                                </button>
                                <button
                                    style={{
                                        backgroundColor: selectedColor === '银色'? '#1E90FF' : '#f0f0f0',
                                        color: selectedColor === '银色'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleColorChange('银色')}
                                >
                                    银色
                                </button>
                       
                            </div>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>选择尺寸</p>
                            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                                <button
                                    style={{
                                        backgroundColor: selectedSize === '10cm'? '#1E90FF' : '#f0f0f0',
                                        color: selectedSize === '10cm'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleSizeChange('10cm')}
                                >
                                    10cm
                                </button>
                                <button
                                    style={{
                                        backgroundColor: selectedSize === '12cm'? '#1E90FF' : '#f0f0f0',
                                        color: selectedSize === '12cm'? 'white' : 'black',
                                        border: 'none',
                                        padding: '5px 10px',
                                        borderRadius: '5px',
                                        cursor: 'pointer'
                                    }}
                                    onClick={() => handleSizeChange('12cm')}
                                >
                                    12cm
                                </button>
                        
                            </div>
                        </div>
                        <div style={{ marginBottom: '20px' }}>
                            <p>购买数量</p>
                            <div style={{ display: 'flex', alignItems: 'center' }}>
                                <button style={{ backgroundColor: '#f0f0f0', border: 'none', padding: '5px 10px', borderRadius: '5px', cursor: 'pointer' }} onClick={() => handleQuantityChange('decrease')}>-</button>
                                <input type="text" value={cartQuantity} style={{ width: '50px', textAlign: 'center', border: '1px solid #ccc', borderRadius: '5px', margin: '0 10px' }} readOnly />
                                <button style={{ backgroundColor: '#f0f0f0', border: 'none', padding: '5px 10px', borderRadius: '5px', cursor: 'pointer' }} onClick={() => handleQuantityChange('increase')}>+</button>
                            </div>
                        </div>
                        <div style={{ textAlign: 'center' }}>
                            <button style={{ backgroundColor: '#1E90FF', color: 'white', border: 'none', padding: '10px 20px', borderRadius: '5px', cursor: 'pointer' }}  onClick={()=>navigate('/ding')}>确认购买</button>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};

export default ProductDetail;